<template>
  <div class="el-mr-mathouseTable">
    <div class="el-mr-mh-firstbg">
      <el-table
        ref="receiveTable"
        size="mini"
        :data="resData"
        style="width: 100%"
        highlight-current-row
        @selection-change="tableSelectionChange"
        height="350"
      >
        <el-table-column type="selection" width="40"> </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="workbinCode"
          label="缓存料箱编码"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="workbinName"
          label="缓存料箱名称"
          :show-overflow-tooltip="true"
        >
        </el-table-column> -->
        <el-table-column
          prop="aoCode"
          label="AO编码"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="itemCode"
          label="图号"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="shop"
          label="单位"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="groupCode"
          label="分组编码"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="isBzj"
          label="是否标准件"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="itemQty"
          label="数量"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="opreator"
          label="操作人"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="opreateTime"
          label="操作时间"
          :show-overflow-tooltip="true"
          width="160"
        >
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { sysBbinMaterialSearch } from "@/utils/api.js";

export default {
  name: "MathouseTable",
  data() {
    return {
      // 当前页数
      pageNumber: 1,
      // 数据总个数
      totalCount: 0,
      // 返回的数据数组
      resData: [],
      // 每页数据个数  row'，'col'，'tmpRow'
      pageSize: 20,
      searchData:{
            workbinCode:'',
            itemCode:'',
            shop:'',
            workbinName:'',
            itemQty:'',
            groupCode:''
        },
    };
  },
  methods: {
    // 表格勾选
    tableSelectionChange(val){
      // 将勾选的数据信息给 TopBtn-修改按钮-删除按钮
      this.$bus.$emit('sysBbMaterialChange',val)
      console.log(val)
    },
    // 选择每页条数后请求接口更新表格
    handleSizeChange(val) {
      this.pageSize = val;
      this.$options.methods.searchDataMethod.bind(this)()
    },
    // 分页函数
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.$options.methods.searchDataMethod.bind(this)()
    },
    searchDataMethod(){
        sysBbinMaterialSearch({
        searchParams:{
          workbinCode:this.searchData.workbinCode,
          itemCode:this.searchData.itemCode,
          shop:this.searchData.shop,
          itemQty:this.searchData.itemQty,
          groupCode:this.searchData.groupCode,
          workbinName:this.searchData.workbinName,
        },
        pageParameter:{
          rows:this.pageSize,
          page:this.pageNumber
        }
      }).then((res)=>{
        this.resData = res.data.responseBody.result;
        this.totalCount = res.data.responseBody.pageParameter.totalCount;
      })
    }
  },
  mounted() {
    this.$options.methods.searchDataMethod.bind(this)()
    // 获取条件查询的数据
    this.$bus.$on('sysBbMaterialTable',(e)=>{
      this.resData = e.result;
      this.totalCount = e.pageParameter.totalCount;
    })
    // 新增成功 刷新Table
    this.$bus.$on('sysBbmTableHandle',(e)=>{
      this.$options.methods.searchDataMethod.bind(this)()
    })
  },
};
</script>
<style scoped>
.el-mr-mh-firstbg {
  width: 100%;
  height: 100%;
  text-align: center;
}
.el-pagination {
  text-align: center;
}
/* .el-mr-mathouseTable {
  height: 350px;
} */
</style>